<!--
 * @Author: 谢陈洁
 * @Date: 2025-05-22 18:17:58
 * @LastEditors: 谢陈洁
 * @LastEditTime: 2025-07-03 18:04:17
 * @Description: file content
-->
<script setup>
import { defineAsyncComponent, defineComponent, onMounted, reactive, ref } from 'vue';
import { fecthArticleList } from '@/service/module/article'
import Clock from './cpns/clock.vue';
// import { articleList } from './mock';
const SelfIntro = defineAsyncComponent(() => import('./cpns/self-intro.vue'))
const articles = ref({
  list: [],
  total: 0,
})
const params = reactive({
  pageIndex: 1,
  pageSize: 5,
})

async function getArticleList() {
  // const start = (params.pageIndex - 1) * params.pageSize
  const res = await fecthArticleList(params);
  articles.value = res;
  console.log('文章列表', articles.value)
  // articles.value = articleList.slice(start, start + params.pageSize)
}
function handleCurrentChange(pageIndex) {
  params.pageIndex = pageIndex
  getArticleList()
}
onMounted(() => {
  getArticleList()
})
</script>
<template>
  <el-row class="home" :gutter="20">
    <el-col :sm="18" :xs="24">
      <article-item v-for="item in articles.list" :key="item.id" :item="item" />
      <el-pagination class="pagination" background layout="prev, pager, next" v-model:current-page="params.pageIndex"
        v-model:page-size="params.pageSize" :total="articles.total" @size-change="getArticleList"
        @current-change="handleCurrentChange" />
    </el-col>
    <el-col :sm="6" :xs="24">
      <self-intro />
    </el-col>
  </el-row>
</template>

<style lang="scss" scoped>
.home {
  .pagination {
    display: flex;
    justify-content: center;
  }
}
</style>